import { Button, Checkbox, NavBar, Tag } from 'antd-mobile';
import { AddCircleOutline, MoreOutline } from 'antd-mobile-icons';
import React, { Component } from 'react';
import './Address.scss'
import service from '../../api';

class addRess extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            addressList: []
        }
    }
    async componentDidMount() {

        var userid = localStorage.getItem('userid')
        var res = await service.address.address_list({ userid })
        console.log(res);
        
        this.setState({
            addressList: res.data.data
        })



    }
    // 修改地址
    toModify(index:any) {
        // console.log(index);  
        var data = this.state.addressList[index]
        this.props.history.push({pathname:'/modify', state:{data}})
    }
    render() {
        return (
            <div className='address'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.push('/index/mine')}} right={<MoreOutline style={{ fontSize: 35 }} />}>地址管理</NavBar>
                </div>

                <div className="main">
                    {
                        this.state.addressList.map((item: any, index: any) => {      
                            console.log(item);
                                                 
                            return (
                                <div className="box" key={index}>
                                    <div className="left">
                                        <Checkbox defaultChecked={item.isDefault} className='check' />
                                        <div className="name">
                                            <span>{item.name}</span>
                                            <span>{item.tel}</span>
                                            {item.isDefault == true ?
                                            <Tag round color='danger'>默认</Tag>:''}
                                            <p>{item.province + item.city + item.county + item.addressDetail}</p>
                                        </div>
                                    </div>
                                    <div className="right">
                                        <AddCircleOutline onClick={() => { this.toModify(index) }} fontSize={30} />
                                    </div>
                                </div>
                            )
                        })
                    }

                </div>



                <Button onClick={() => { this.props.history.push('/modify') }} className='but' block shape='rounded' color='primary' size='large'>
                    增加地址
                </Button>
            </div>
        );
    }
}

export default addRess;